<template>
  <div id="home">
    <div id="daohang">
      <el-image
          style="width: 100px; height: 100px;margin-top: 50px"
          :src="this.user.pic"
      ></el-image>
      <h2 style="color: azure">欢迎您 {{user.username}}</h2>
      <el-col :span="12" style="width: 100%;height: 500px;">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#2c3e50"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="border-right: #2c3e50">
          <el-menu-item index="1" @click="toCar()" style="width: 100%;float:left;">
            <i class="el-icon-menu" ></i>
            <span slot="title">车辆信息</span>
          </el-menu-item>
          <el-menu-item index="2" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="toRepayment()" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">还款信息</span>
          </el-menu-item>
          <el-menu-item index="4" @click="toShen()" v-show="this.user.roleCode==4 || this.user.roleCode==5 || this.user.roleCode==6" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">审核模块</span>
          </el-menu-item>
          <el-menu-item index="5" style="width: 100%;float:left;">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div id="addP">
        <h2>个人详情列表</h2>
        <el-descriptions class="margin-top" title="" :column="3"  border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{this.user.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{this.user.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              性别
            </template>
            {{this.user.sex==1?'男':'女'}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              居住地
            </template>
            {{this.user.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              联系地址
            </template>
            {{this.user.contactAddress}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              出生日期
            </template>
            {{this.user.birthday}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              婚姻状态
            </template>
            {{user.bankStatus==1?"未婚":"已婚"}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              邮箱
            </template>
            {{this.user.emails}}
          </el-descriptions-item>
        </el-descriptions>
        <h2>身份验证信息</h2>
        <el-descriptions class="margin-top" title="" :column="3"  border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              身份证号码
            </template>
            {{this.user.numbers}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              银行卡号码
            </template>
            {{this.user.bankCard}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              所属银行
            </template>
            {{this.user.bankName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              银行卡类型
            </template>
            {{user.bankStatus==1?"储蓄卡":"信用卡"}}
          </el-descriptions-item>
        </el-descriptions>

      <h2>当前额度：<span style="color: red">{{this.agreement}}</span> </h2>
<!--      按钮-->
      <el-row >
        <el-button type="primary" icon="el-icon-edit"  circle style="margin-left: 90%" @click="dialogFormVisible =true">
          编辑信息
        </el-button>
        <div v-if="this.user.status==0">
          <el-button type="primary" @click="shiming =true" icon="el-icon-edit"  circle style="margin-left: 90%">
            实名认证
          </el-button>
        </div>
        <div v-if="this.user.status==0">
        <el-button type="primary" icon="el-icon-edit"  circle style="margin-left: 90%" @click="shimingrenzheng =true">
          上传身份证
        </el-button>
        </div>
        <el-button type="primary" icon="el-icon-edit"  circle style="margin-left: 90%" @click="toShou()" v-show="this.agreement==0">
          立即授信
        </el-button>
      </el-row>
    </div>
<!--修改和添加的弹出框-->
    <div>
      <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="头像" prop="pic">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/user/user/updateimg/"
                name= "file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="居住地" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="联系地址" :label-width="formLabelWidth">
            <el-input v-model="form.contactAddress" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <!--          <el-input v-model="form.birthday" autocomplete="off" style="width: 200px;"></el-input>-->
            <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="婚姻状态" :label-width="formLabelWidth">
            <el-select v-model="form.marriage" placeholder="请选择活动区域">
              <el-option label="未婚" :value="1"></el-option>
              <el-option label="已婚" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.emails" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 上传身份证的弹出框-->
    <div>
      <el-dialog title="身份证上传" :visible.sync="shimingrenzheng">
      <el-form :model="users">
        <el-form-item label="正面身份证" prop="plusImg">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/user/user/plusImg/"
              name= "plusImg"
              :show-file-list="false"
              :on-success="plusImgs">
            <img v-if="plus" :src="plus" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="反面身份证" prop="minusImg">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/user/user/minusImg/"
              name= "minusImg"
              :show-file-list="false"
              :on-success="minusImgs">
            <img v-if="minus" :src="minus" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div>
          <el-form ref="form" :model="userss" label-width="80px">
              <el-tag type="success">姓名：{{userss.name}}</el-tag>
              <el-tag type="success">民族：{{userss.nation}}</el-tag>
              <el-tag type="success">出生日期：{{userss.birthday}}</el-tag>
              <el-tag type="success">性别：{{userss.sex}}</el-tag>
              <el-tag type="success">身份证号码：{{userss.number}}</el-tag>
              <el-tag type="success">出生地址：{{userss.address}}</el-tag>
          </el-form>
          <br/>
          <el-form ref="form" :model="userss" label-width="80px">
            <el-tag type="success">身份证日期：{{usersss.timelimit}}</el-tag>
            <el-tag type="success">身份证签发地：{{usersss.authority}}</el-tag>
          </el-form>
          <br/>
        </div>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <div v-if="this.user.status==0">
            <el-button type="primary" @click="shiming = true"  >实名认证</el-button>
          </div>
          <div>
            <el-button @click="shimingrenzheng = false">取 消</el-button>
          </div>
          <div>
            <el-button type="primary" @click=addrenzhen >确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
<!--    实名认真弹出框-->
    <div>
      <el-dialog title="实名认证" :visible.sync="shiming">
        <div slot="footer" class="dialog-footer">
          <el-button @click="shiming = false">取 消</el-button>
          <el-button type="primary" @click=addrenzhen >确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>


</template>

<script>
export default {
  data(){
    return{
      formLabelWidth:"200px",
      //显示个人信息
      user:{},
      //个人信息弹出框
      dialogFormVisible: false,
      //个人信息
      form:{},
      //头像
      imageUrl: '',
      //身份证照片弹窗
      shimingrenzheng: false,
      //身份证正面
      plus:'',
      //身份证反面
      minus:'',
      //身份证
      users:{},
      //身份证上传正面信息
      userss:{},
      //身份证上传反面信息
      usersss:[],
      //编号
      code:'',
      //实名认证弹出框
      shiming: false,
      agreement:null
    }
  },
  methods:{
    initData(){
      this.axios.post(`/user/findUserByCode?code=`+this.user.code).then(res=>{
          this.user=res.data.data;
          this.form=res.data.data;
      })
    },
    getAgreementCode(){
      this.axios.post(`/agreement/agreement/getAgreement?code=`+this.user.code).then(res=>{
          if (res.data.code==200){
            this.agreement=res.data.data.num;
          }else {
            this.agreement=0
          }
      })
    },
    // 授信
    toShou(){
      this.axios.post(`/agreement/agreement/addAgreement?code=`+this.user.code).then(res=>{
        if(res.data.code==500){
          //获取返回的数据
          this.$message.error(res.data.msg);
        }
        else if(res.data.code==400){
          this.$message.error(res.data.msg);
        }
        else{
          this.agreement=res.data.data.num;
          this.$message.success(res.data.msg);

        }
      })
    },
    //身份证上传
    addrenzhen(){
      this.axios.post('user/user/imgsfz?code='+this.code).then(res=>{
        if (res.data.code==200){
          this.$message.success("实名认证成功")
          this.shimingrenzheng=false;
          this.initData();
        }
      })
    },
    //反面身份证照片
    minusImgs(res, file){
      this.form.minusImg=res;
      this.usersss=res.data;
      this.users.minusImg=res;
      //传给后台添加用
      // this.users.minusImg=JSON.stringify(res.imgser)
      this.minus = URL.createObjectURL(file.raw);
    },
    //正面身份证照片
    plusImgs(res, file){
      this.userss=res.data;
      this.form.plusImg=res;
      console.log(res.data)
      console.log(this.userss)
      // //传给后台添加用
      // this.users.plusImg=JSON.stringify(res.imgser)
      // console.log(JSON.stringify(res.imgser))
      this.users.plusImg=res;
      this.plus = URL.createObjectURL(file.raw);
    },
    //头像
    handleAvatarSuccess(res, file) {
      this.form.pic=res;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //添加和修改的弹出框
    add(){
      this.axios.post('user/user/updateuser',this.form).then(res=>{
        if (res.data.code==200){
          this.$message.success("修改成功")
          this.initData();
          this.dialogFormVisible = false
        }
      })
    },
    //进入个人信息页面
    toUser(){
      this.$router.push("/personaldetails")
    },
    //进入还款页面
    toRepayment(){
      this.$router.push("/repay")
    },
    //进入审核页面
    toShen(){
      this.$router.push("/check")
    },
    //进入车辆信息页面
    toCar(){
      this.$router.push('/loanshome')
    },
    toaddRepayment(){
      this.axios.put("lendmoney/api/lendmoney/addLoanper",this.loanperson).then(res=>{
        if (res.data.code==200){
          this.$message.success("添加成功")
        }
      })
    }
  },
  created() {
// 获取数据
    const data = JSON.parse(localStorage.getItem('user'));
    //赋值然后显示登陆人
    this.user = data
    //显示当前前人的实名认证状态
    console.log(this.user)
    //显示个人详情
    this.form=data
    //显示个人头像
    this.imageUrl=data.pic
    //给上传图片赋值
    this.users.code=data.code;
    //编号
    this.code=this.user.code;
    this.initData();
    this.getAgreementCode();
  }
}
</script>

<style>

#home{
  width: 100%;
  height: 815px;
  background-color: rgba(152, 134, 134, 0.18);
  box-sizing: border-box;
}



#daohang{
  width: 18%;
  height: 97%;
  background-color: #2c3e50;
  margin-left: 12px;
  margin-top: 10px;
  float: left;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
#addP{
  width: 79%;
  height:  97%;
  margin-top: 10px;
  margin-right: 12px;
  float: right;
  background-color: rgb(255, 255, 255);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 15px;
  box-sizing: border-box;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
